<template>

  <div class="studentSituationTable">
    <el-table :data="studentSituationStore.stuSituationProceedData" style="width: 100%; height: 100%; font-size: 18px;">
      <el-table-column prop="name" label="问卷名称" min-width="220"/>
      <el-table-column prop="startTime" label="开始时间" min-width="80"/>
      <el-table-column prop="endTime" label="结束时间" min-width="80"/>
      <el-table-column prop="state" label="任务状态" min-width="50">
        <template #default="{ row }">
          <span :class="row.state === '未填写' ? 'unfinish' : 'change'">
            {{ row.state }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="do" label="操作" width="90">
        <template #default="{row}">
          <el-button link type="primary" size="large" @click="studentDetailClick(row)" style="font-size: 18px; color: #071c7b;">
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>  

</template>

<script setup>
import router from '@/router';
import { onBeforeMount,onUnmounted } from 'vue'
import { useStudentSituationStore } from '@/stores/student/studentSituation';

const studentSituationStore = useStudentSituationStore()

onBeforeMount(() => {
 studentSituationStore.stuSituationProceedRequest()

})

const studentDetailClick = (row) => {
  router.push({
    name:'studentSituationDetail',
    query:{id:row.id}
  })
}

// const studentDoingData = studentSituationStore.stuSituationProceedData

// const studentDoingData = [
//   {
//     name: '2024-2025学年学业情况',
//     startTime: '2025-06-11',
//     endTime: '2025-07-11',
//     state: '未填写',
//   },
//   {
//     name: '2024-2025学年学业情况',
//     startTime: '2025-06-11',
//     endTime: '2025-07-11',
//     state: '待修改',
//   },
// ]
</script>

<style scoped>
.studentSituationTable {
  width: 100%;
  height: 100%;      
  background-color: #fff;
  padding: 10px;
}
.unfinish {
  color: #b31219;
}
.change {
  color: #5328e3;
}
</style>